<!--
 * @Date: 2025-09-07 21:10:46
 * @LastEditors: 贾二小 erxiao.jia@outlook.com
 * @LastEditTime: 2025-10-02 15:52:45
 * @FilePath: /admin-vue/src/views/admin/system/user-center/modules/password-operate-modal.vue
-->
<script setup lang="ts">
import type { FormInst, FormRules } from 'naive-ui'

const { password } = useAuth()

defineOptions({ name: 'PasswordOperateModal' })

const formModel = reactive<PasswordModel>({
  old_password: '',
  password: '',
  password_confirmation: '',
})

const formRef = ref<FormInst | null>(null)

//提交数据
async function handleSubmit(e: MouseEvent) {
  e.preventDefault()
  await formRef.value?.validate(async (errors) => {
    if (!errors) {
      await password(formModel)
    }
  })
}

const rules: FormRules = {
  old_password: {
    required: true,
    message: '请输入旧密码',
    trigger: 'input',
  },
  password: {
    required: true,
    message: '请输入新密码',
    trigger: 'input',
  },
  password_confirmation: {
    required: true,
    message: '请再次输入密码',
    trigger: 'input',
  },
}
</script>

<template>
  <n-card>
    <n-form ref="formRef" :label-width="80" :model="formModel" :rules="rules">
      <n-form-item-row label="旧密码" path="old_password">
        <n-input
          type="password"
          v-model:value="formModel.old_password"
          placeholder="请输入旧密码"
        />
      </n-form-item-row>
      <n-form-item-row label="新密码" path="password">
        <n-input type="password" v-model:value="formModel.password" placeholder="请输入新密码" />
      </n-form-item-row>
      <n-form-item-row label="确认密码" path="password_confirmation">
        <n-input
          type="password"
          v-model:value="formModel.password_confirmation"
          placeholder="请再次输入密码"
        />
      </n-form-item-row>
      <NButton type="primary" @click="handleSubmit">{{ $t('common.save') }}</NButton>
    </n-form>
  </n-card>
</template>

<style lang="scss" scoped></style>
